<template>
  <div id="fun">
    <div id="home">
      <p id="tip" @click="switchs('Page', root, tips)" ref="one">首页</p>
      <ul>
        <li
          :id="'q' + index"
          v-for="(tip, index) in tips"
          :key="index"
          class="t"
          @click="switchs(tip.tipline, root)"
        >
          {{ tip.tip }}
        </li>
      </ul>
    </div>
    <div id="top">
      <div id="user">
        {{ user }}
        <button @click="outUser">退出登录</button>
      </div>
      <span>校园二手市场管理系统</span>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import axios from "axios";
import VueCookies from "vue-cookies";

export default {
  props: ["tips", "root"],
  router: router,
  mounted() {

    this.$emit("isRoot"); //判断是否管理员，进入就判断
    // 生命钩子，挂载完毕时调用【自动点击首页出现路由组件】
    this.switchs("Page", this.root, this.tips);
  
    
    // 对用户名太长做处理
    if (VueCookies.get("uname") != null) {
      var uname = VueCookies.get("uname").slice(0, 5);
      this.user = uname + (VueCookies.get("uname").length > 5 ? "..." : "");
    }
  },

  methods: {
    switchs: function (tipline, root, tips) {
   
      this.uid = JSON.parse(VueCookies.get("uid"));
      // uid判断登录
      if (!this.uid && tipline != "Page") {
        alert("未登录，请先登录！"); // 第一次进，如果不是page路由且没登陆就不能跳
        window.location.replace("/index");
        return false;
      } else {
        // User路由只有管理员才能操作
        if (tipline == "User" && !root){
          alert("管理员才能操作该功能！");
        }else {
          // 左边按钮路由跳转(是管理员)
          this.$router.replace({
            name: tipline,
            // 当page页面需要tips信息去渲染，就传，前其他不用传tips
            params: {
              tips: tips,
              
            },
          });
        } 
      }
    },
    outUser: function () {
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先在首页登录！");
        window.location.replace("/index");
        return false;
      } else {
        // 查询是否管理员

        axios({
          method: "POST",
          url: "http://localhost:8081/lo/intercept/user/deleteusercookie",
          params: {
            uid: VueCookies.get("uid"),
            ucookie: VueCookies.get("ucookie"),
          },
          headers: {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          },
        }).then(
          (response) => {
            console.log(response.data);
            // 退出登录
            VueCookies.remove("uid");
            VueCookies.remove("uname");
            VueCookies.remove("ucookie");
            this.user = "未登录";
            alert("退出登录成功！");
          },
          (error) => {
            alert("请求失败,请检查服务器是否开启！");
          }
        );
      }
    },
  },
  data() {
    return {
      user: "未登录",
    };
  },
};
</script>

<style scoped>
@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont_three.ttf") format("truetype");
}
* {
  list-style-type: none;
  font-family: "iconfont" !important;
}
#home {
  width: 20%;
  display: inline-block;
  height: 1000px;
  background-color: #565c64;
  /* border: 1px solid #000; */
}
#home ul {
  padding: 0px;
  margin: 0px;
}
#home #tip {
  width: 100%;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 40px;
  margin: 0px;
  background-color: #ffb53e;
  cursor: pointer; /* 经过有手指*/
}
#home .t {
  width: 100%;
  color: rgb(237, 234, 234);
  font-size: 20px;
  border-bottom: 2px solid #000;
  border-top: 1px solid rgb(137, 134, 134);
  padding-bottom: 10px;
  padding-top: 10px;
  text-indent: 30px; /*缩进*/
}
#home .t:hover {
  cursor: pointer; /* 经过有手指*/
}

#q0::before {
  content: "\f014c";
}
#q1::before {
  content: "\e648";
}
#q2::before {
  content: "\e897";
}
#q3::before {
  content: "\e606";
}
#q4::before {
  content: "\f018f";
}
#top {
  color: #fff;
  width: 70%;
  height: 50px;
  display: inline-block;
  line-height: 50px;
  /* border: 1px solid red; */
  vertical-align: top; /*调整对齐线*/
}

#top #user {
  background-color: #000;
  display: inline-block;
  width: 300px;
  height: 60px;
  font-size: 18px;
  text-indent: 20px;
  font-family: "iconfont" !important;
}

#top #user button {
  cursor: pointer; /* 经过有手指*/
}

#top #user::before {
  content: "\e8c8";
}

#top #user button {
  margin-left: 20px;
  height: 30px;
}

#top span {
  text-align: center;
  display: inline-block;
  width: 60%;
  font-size: 28px;
  vertical-align: bottom; /*调整对齐线*/
}
</style>